<template>
  <div class="image-editor">
    <el-form :model="localConfig" label-width="100px" size="small">
      <!-- 图片上传 -->
      <el-form-item label="图片上传">
        <el-upload
          class="image-uploader"
          action="#"
          :show-file-list="false"
          :before-upload="beforeUpload"
          :http-request="handleUpload"
        >
          <div v-if="localConfig.imageUrl" class="image-preview">
            <img :src="localConfig.imageUrl" alt="预览" class="uploaded-image">
            <div class="image-actions">
              <el-button size="mini" type="primary" @click.stop="replaceImage">替换</el-button>
              <el-button size="mini" type="danger" @click.stop="removeImage">删除</el-button>
            </div>
          </div>
          <div v-else class="upload-placeholder">
            <i class="el-icon-plus"></i>
            <div class="upload-text">点击上传图片</div>
          </div>
        </el-upload>
      </el-form-item>

      <!-- 图片描述 -->
      <el-form-item label="图片描述">
        <el-input v-model="localConfig.alt" placeholder="请输入图片描述" />
      </el-form-item>

      <!-- 尺寸设置 -->
      <el-form-item label="图片尺寸">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-input v-model="localConfig.width" placeholder="宽度，如: 100px 或 50%">
              <template slot="prepend">宽</template>
            </el-input>
          </el-col>
          <el-col :span="12">
            <el-input v-model="localConfig.height" placeholder="高度，如: 100px 或 auto">
              <template slot="prepend">高</template>
            </el-input>
          </el-col>
        </el-row>
      </el-form-item>

      <!-- 对齐方式 -->
      <el-form-item label="对齐方式">
        <el-radio-group v-model="localConfig.align">
          <el-radio label="left">左对齐</el-radio>
          <el-radio label="center">居中</el-radio>
          <el-radio label="right">右对齐</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 显示模式 -->
      <el-form-item label="显示模式">
        <el-select v-model="localConfig.objectFit" placeholder="请选择图片填充模式">
          <el-option label="保持比例" value="contain" />
          <el-option label="填充容器" value="cover" />
          <el-option label="原始尺寸" value="none" />
        </el-select>
      </el-form-item>
    </el-form>

    <div class="editor-actions">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ImageEditor',
  props: {
    imageConfig: {
      type: Object,
      default: () => ({
        imageUrl: '',
        alt: '',
        width: '100%',
        height: 'auto',
        align: 'center',
        objectFit: 'contain'
      })
    }
  },
  data() {
    return {
      localConfig: JSON.parse(JSON.stringify(this.imageConfig))
    }
  },
  methods: {
    beforeUpload(file) {
      const isImage = file.type.startsWith('image/')
      const isLt5M = file.size / 1024 / 1024 < 5

      if (!isImage) {
        this.$message.error('只能上传图片文件!')
        return false
      }
      if (!isLt5M) {
        this.$message.error('图片大小不能超过 5MB!')
        return false
      }
      return true
    },

    handleUpload(options) {
      const file = options.file
      const reader = new FileReader()
      
      reader.onload = (e) => {
        this.localConfig.imageUrl = e.target.result
      }
      reader.readAsDataURL(file)
    },

    replaceImage() {
      this.localConfig.imageUrl = ''
      // 触发文件选择
      document.querySelector('.image-uploader .el-upload').click()
    },

    removeImage() {
      this.localConfig.imageUrl = ''
      this.localConfig.alt = ''
    },

    save() {
      this.$emit('save', this.localConfig)
    },

    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped>
.image-editor {
  padding: 20px;
}

.image-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 200px;
}

.image-uploader:hover {
  border-color: #409eff;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #8c939d;
}

.upload-placeholder i {
  font-size: 28px;
  margin-bottom: 10px;
}

.image-preview {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.uploaded-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.image-actions {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.editor-actions {
  text-align: right;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e6e8eb;
}
</style>